<!-- 商务回访详情 -->
<template>
  <div class="container" v-loading="loading">
    <el-form ref="formRef" :rules="rules" label-width="150px">
      <el-divider content-position="left"><span class="title-left-color">门店情况</span></el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="人员规模：" prop="personnel_size">
            <el-input v-model.trim="storeInfo.personnel_size" disabled placeholder="请填写人员规模"><template #append>人</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板年龄：" prop="boss_age">
            <el-input v-model.trim="storeInfo.boss_age" disabled placeholder="请填写老板年龄"><template #append>岁</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="正常购买数量：" prop="purchase_quantity">
            <el-input v-model.trim="storeInfo.purchase_quantity" disabled placeholder="请填写正常购买数量"><template #append>台</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店铺等级：" prop="shop_level">
            <el-select v-model.trim="storeInfo.shop_level" disabled placeholder="请选择店铺等级" clearable>
              <el-option v-for="item in shopLevelList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主营业务：" prop="main_business">
            <el-select v-model.trim="storeInfo.main_business" disabled multiple placeholder="请选择主营业务" clearable>
              <el-option v-for="item in mainBusinessList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线上推广：" prop="online_promotion">
            <el-select v-model.trim="storeInfo.online_promotion" disabled multiple placeholder="请选择线上推广" clearable>
              <el-option v-for="item in onlinePromotionList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入驻形式：" prop="form_of_entry">
            <el-select v-model.trim="storeInfo.form_of_entry" disabled placeholder="请选择入驻形式" clearable>
              <el-option v-for="item in formOfEntryList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入驻兴趣点：" prop="settle_in_interest_points">
            <el-select v-model.trim="storeInfo.settle_in_interest_points" disabled multiple placeholder="请选择入驻兴趣点" clearable>
              <el-option v-for="item in settleInInterestPointsList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营时间：">
            <el-input v-model.trim="storeInfo.operating_hours" disabled placeholder="请填写经营时间"><template #append>年</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门店手机数量：">
            <el-input v-model.trim="storeInfo.store_mobile_number" disabled placeholder="请填写门店手机数量"><template #append>台</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分期销量：">
            <el-input v-model.trim="storeInfo.installment_sales_volume" disabled placeholder="请填写分期销量"><template #append>台</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="获客渠道：">
            <el-select v-model.trim="storeInfo.customer_acquisition_channel" disabled multiple placeholder="请选择获客渠道" clearable>
              <el-option v-for="item in customerAcquisitionChannelList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料：">
            <el-select v-model.trim="storeInfo.materials" disabled multiple placeholder="请选择物料" clearable>
              <el-option v-for="item in materialsList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户动作：">
            <el-select v-model.trim="storeInfo.customer_action" disabled multiple placeholder="请选择客户动作" clearable>
              <el-option v-for="item in customerActionList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="回访图片：" prop="store_info.visit_images">
            <UploadImageListInfo ref="uploadImageListRef" group="visit_images" v-model:disabledbtn="disabledbtn" v-model:loading="loading" v-model:imageList="storeInfo.visit_images" :imageNum="imageNum" suggestInfo="" :showDeleteIcon="false" :showUpload="false" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left"><span class="title-left-color">业务员拜访记录</span></el-divider>
    <VisitLogInfo :id="id" />
    <el-divider content-position="left"><span class="title-left-color">商务回访记录</span></el-divider>
    <FollowVisitRecordInfo :id="id" />
    <el-form ref="formRef" :model="sellerRemarkForm" :rules="rules" label-width="150px" class="mt20">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="商务回访记录：">
            <el-input v-model="sellerRemarkForm.record" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="商务回访记录"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer-center">
      <el-button :disabled="disabledbtn" @click="cancelSubmit">取 消</el-button>
      <el-button type="primary" :disabled="disabledbtn" v-if="!isDisabledbtn" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import VisitLogInfo from "@/components/user/storeManager/storeInfo/VisitLogInfo.vue";
import FollowVisitRecordInfo from "@/components/user/storeManager/storeInfo/FollowVisitRecordInfo.vue";
import UploadImageListInfo from "@/components/common/UploadImageListInfo.vue";
import type { postOrPutType } from "@/constants";
import type { HasId } from "@/types/common";
import { useState } from "@/hooks/useState.ts";
import type { IDictData } from "@/types/dict";
import type { IStaff } from "@/types/staff/staff";
import { splitAndFilter } from "@/utils/utils";
import { getStoreByIdInfo } from "@/utils/api/store";
import type { IStoreInfo, IStoreInfoVO } from "@/types/storeManager/store";
import type { IFollowVisitRecordInfo } from "@/types/followVisitRecordInfo";
import { commonBusinessAffairsRecordInfo } from "@/utils/api/businessAffairsRecord";
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  id: number;
  storageList: Array<IStaff>;
  whetherStatue: Array<IDictData>;
  shopLevelList: Array<IDictData>;
  onlinePromotionList: Array<IDictData>;
  mainBusinessList: Array<IDictData>;
  formOfEntryList: Array<IDictData>;
  settleInInterestPointsList: Array<IDictData>;
  customerAcquisitionChannelList: Array<IDictData>;
  materialsList: Array<IDictData>;
  customerActionList: Array<IDictData>;
}
const { id, shopLevelList, onlinePromotionList, mainBusinessList, settleInInterestPointsList, formOfEntryList, customerAcquisitionChannelList, materialsList, customerActionList } = defineProps<Props>();

const emit = defineEmits<{
  handleInitData: [];
  handleSuccess: [];
}>();
const isDisabledbtn = ref(false);
const checkAll = ref(false);
const formRef = useTemplateRef("formRef");
const methodType = ref<postOrPutType>("PUT");
const imageNum = ref<number>(0);
const uploadImageListRef = useTemplateRef("uploadImageListRef");

const sellerRemarkForm = reactive<IFollowVisitRecordInfo>({
  store_id: 0,
  record: ""
});
const storeInfo = reactive<IStoreInfo>({
  id: 0,
  form_of_entry: "",
  settle_in_interest_points: [],
  personnel_size: "",
  operating_hours: "",
  store_mobile_number: "",
  boss_age: "",
  purchase_quantity: "",
  installment_sales_volume: "",
  customer_acquisition_channel: [],
  shop_level: "",
  materials: [],
  main_business: [],
  customer_action: [],
  online_promotion: [],
  visit_images: [],
  update_time: ""
});
const rules = reactive({});

/*  */
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
      handleInitData();
    } else {
      sellerRemarkForm.store_id = newValue;
      handleGetDataById(id);
    }
  }
);

/* 获取详情信息 */
function handleGetDataById(id: number) {
  toggleState(true);
  getStoreByIdInfo<IStoreInfoVO, HasId>({ id })
    .then(res => {
      if (res.result.store_info !== null) {
        storeInfo.id = res.result.store_info.id;
        storeInfo.form_of_entry = res.result.store_info.form_of_entry;
        storeInfo.settle_in_interest_points = splitAndFilter(res.result.store_info.settle_in_interest_points);
        storeInfo.personnel_size = res.result.store_info.personnel_size;
        storeInfo.operating_hours = res.result.store_info.operating_hours;
        storeInfo.store_mobile_number = res.result.store_info.store_mobile_number;
        storeInfo.boss_age = res.result.store_info.boss_age;
        storeInfo.purchase_quantity = res.result.store_info.purchase_quantity;
        storeInfo.installment_sales_volume = res.result.store_info.installment_sales_volume;
        storeInfo.customer_acquisition_channel = splitAndFilter(res.result.store_info.customer_acquisition_channel);

        storeInfo.shop_level = res.result.store_info.shop_level;
        storeInfo.materials = splitAndFilter(res.result.store_info.materials);
        storeInfo.main_business = splitAndFilter(res.result.store_info.main_business);
        storeInfo.customer_action = splitAndFilter(res.result.store_info.customer_action);
        storeInfo.online_promotion = splitAndFilter(res.result.store_info.online_promotion);

        storeInfo.visit_images = splitAndFilter(res.result.store_info.visit_images);
      }
    })
    .catch(e => {
      console.log(e);
    })
    .finally(() => {
      toggleState(false);
    });
}
/* 初始化数据 */
function handleInitData() {
  methodType.value = "POST";
  isDisabledbtn.value = false;

  checkAll.value = false;

  storeInfo.id = 0;
  storeInfo.form_of_entry = "";
  storeInfo.settle_in_interest_points = [];
  storeInfo.personnel_size = "";
  storeInfo.operating_hours = "";
  storeInfo.store_mobile_number = "";
  storeInfo.boss_age = "";
  storeInfo.purchase_quantity = "";
  storeInfo.installment_sales_volume = "";
  storeInfo.customer_acquisition_channel = [];
  storeInfo.shop_level = "";
  storeInfo.materials = [];
  storeInfo.main_business = [];
  storeInfo.customer_action = [];
  storeInfo.online_promotion = [];

  sellerRemarkForm.record = "";

  uploadImageListRef.value?.handleClearImage();
  formRef.value?.resetFields();
  formRef.value?.clearValidate();
}

/* 保存校验数据 */
function handleValidate() {
  if (sellerRemarkForm.record === "") {
    ElMessage.warning("请填写回访记录");
    return false;
  }
  return true;
}

/* 保存或编辑 */
function submitForm() {
  if (!formRef.value) return;
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.warning("请填写必填字段");
      return;
    }
    if (!handleValidate()) return;
    submitFormInfo();
  });
}

/* 保存或编辑信息 */
function submitFormInfo() {
  /* 防止多次提交 */
  toggleState(true);
  commonBusinessAffairsRecordInfo(sellerRemarkForm)
    .then(res => {
      ElMessage.success(res.msg);
      cancelSubmit();
      emit("handleSuccess");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 保存或编辑 取消提交 */
function cancelSubmit() {
  emit("handleInitData");
}
</script>

<style lang="scss" scoped>
/* 修改select的盒模型 */
.el-select {
  display: block;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

.mt20 {
  margin-top: 20px;
}
</style>
